<template>
  <div class="person">
    <!-- src/components/Person.vue -->
    <img :src="avatar" />
    <p>{{ name }}</p>
    <i class="el-icon-error" @click="deletePerson" ></i>
  </div>
</template>

<script>
export default {
  // props声明自定义属性，接收父组件传过来的参数: name  avatar
  props: ["name", "avatar","id"],
  // 删除person,监听到用户点击了叉子
  methods: {
    // 作用为主动触发之定义事件
    deletePerson(){
      this.$emit('del')
    }
  },
};
</script>

<style lang="scss" scoped>
.person:hover i{
  display: block;
}
.person {
  width: 80px;
  text-align: center;
  display: inline-block;
  margin-right: 10px;
  position: relative;
  i{
    position: absolute;
    top: -8px;
    right: -8px;
    display: none;
  }
  img {
    width: 80px;
  }
  p {
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
